<template>
	<view class="btn-content" :style="{opacity:opacity}">
		<!-- 但个按钮 这个组件就是一个按钮 -->
		<view class="content" @click="handleClick" :style="style">{{name}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			paramsJson: {
				type: Object,
			},
			opacity: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				name: "",
				style: "",
				bottom: 0,
				isActive: false,

			}
		},
		computed: {

		},
		mounted() {
			this.getProps()
		},
		methods: {

			getProps() {
				console.log("传入的参数是", this.paramsJson);
				this.name = this.paramsJson.name.default ? this.paramsJson.name.default : this.name
				this.style = this.paramsJson.style.default ? this.paramsJson.style.default : this.style
			},
			handleClick(event) {
				this.isActive = true
				this.$emit('playClickVoice')
				this.$emit("getGameResult")
				setTimeout(() => {
					this.isActive = false
				}, 500);
			}

		}

	}
</script>

<style lang="scss" scoped>
	.btn-content {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999999;
		pointer-events: none;

	}

	.content {
		pointer-events: fill;
	}

	.active {
		animation: activeClick 0.5s ease-in-out;


	}

	@keyframes breathe {
		0% {
			transform: scale(0.95);
		}

		50% {
			transform: scale(1);
		}

		100% {
			transform: scale(0.95);
		}
	}

	@keyframes activeClick {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.7;
			transform: scale(1.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>